Popular WordPress page builder plugin Elementor recently announced an update aimed at delivering faster page loads. This update in version 3.2 focuses on improving the efficiency of how JavaScript and CSS files are delivered, promising to enhance Core Web Vitals scores.
### According to Elementor’s Announcement:
> “The company has optimized its development cycle and created a five-track plan targeting specific performance areas such as Optimized Asset Loading, JavaScript/CSS Libraries, Optimized Internal JavaScript and CSS, Optimized Backend and Rendering Processes, and leaner code output. Elementor’s plan ensures significant improvements in all aspects of performance, both front and back.”
Elementor has also introduced an efficient way for publishers to indicate how Google Fonts should be loaded:
> “A new Google font loading feature personalizes users’ loading experience, enabling modifications on how Elementor loads Google Fonts. The Elementor dashboard settings offer options such as auto, swap, block, optional, and fallback.”
### Core Web Vitals
Core Web Vitals are metrics designed to measure the web page experience for actual users on mobile devices. The data is collected from users on Chrome who have opted in to provide the information, which is then compiled in the Chrome User Experience (CrUX) Report. These metrics will become a ranking signal in June 2021.
Hosting a website on a fast server alone will not improve Core Web Vitals scores, as the issues that negatively impact these scores are more related to how the website is coded. Therefore, making website templates and page builders’ code more efficient is crucial.
Elementor’s announcement highlights their commitment to delivering web page code more efficiently, ultimately helping publishers provide a better user experience and achieve better rankings.
### Why JavaScript and CSS Can Be Problematic
JavaScript and Cascading Style Sheets (CSS) are files that provide functionality and visual style to web pages. However, the rendering process of a web page pauses each time it encounters a JavaScript or CSS file, making them render-blocking.
To optimize performance, it’s important to minimize the number of files needed for downloading. The ideal approach is to download only the necessary JavaScript and CSS needed to render a given web page. For instance, unnecessary files like those for contact forms shouldn’t be downloaded if the page doesn’t contain a contact form. This methodology is called conditional loading.
### Elementor is Now More Efficient
Elementor has made changes to ensure many JavaScript files are downloaded only when needed, known as conditional loading. They have also split the e-icons CSS file into two separate libraries—frontend and backend—saving up to 50KB per page load. Additionally, CSS affecting only Editors will not load automatically for all users, saving 17 kilobytes for non-Editor site visitors.
> “The Lightbox, Screenful, Dialog, and Share links libraries are all loaded conditionally,” Elementor confirmed. They also mentioned future plans to begin conditionally loading CSS.
> “Both our R&D and SEO teams have been working on making Elementor fully compatible with the upcoming Web Vitals Google algorithm change. We’ve focused on reducing DOM elements, rendering process optimization, dynamic asset loading, and more,” said the Elementor team.
### Elementor Publishes Videos for Improving Core Web Vitals
Alongside these code changes, Elementor has released educational YouTube courses to help users understand best practices for building faster user experiences.
> “We’ve created some excellent educational materials, including a new course on improving website performance. This will cover the entire process, since performance is based on various factors, not just your website building platform of choice.”
### Elementor Takes the Initiative
It’s encouraging to see companies like Elementor making these critical updates. This announcement is not only beneficial for Elementor users but also sets a benchmark for the rest of the WordPress ecosystem, including plugins and theme makers.
### Citation
Introducing Text Path & Mask Layer Features!
